<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: #ccc;
        }

        p {
            color: #333;
            font-size: 30px;
        }

        span {
            color: #e96900;
            font-size: 30px;
        }

        #content {
            width: 300px;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <template id="x1">
        <div id="content">
            <p>
                <span>姓名:</span>
                {{fullName}}
            </p>
            <p>
                <span>el:</span>
                {{el}}
            </p>
            <p>
                <span>data:</span>
                {{data}}
            </p>
            <p>
                <span>template:</span>
                {{template}}
            </p>
            <p>
                <span>beforeCreate:</span>
                {{beforeCreate}}
            </p>
            <p>
                <span>created:</span>
                {{created}}
            </p>
            <p>
                <span>beforeMount:</span>
                {{beforeMount}}
            </p>
            <p>
                <span>mounted:</span>
                {{mounted}}
            </p>
            <p>
                <span>computed:</span>
                {{computed}}
            </p>
            <p>
                <span>methods:</span>
                {{methods}}
            </p>
            <p>
                <span>get:</span>
                {{get}}
            </p>
            <p>
                <span>set:</span>
                {{set}}
            </p>
            <p>
                <span>watch:</span>
                {{watch}}
            </p>
        </div>

    </template>
</body>
<script src="/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        template: '#x1',
        data: function () {
            return {
                firstName: 'rose',
                lastName: 'green',
                username: 'jack',
                template: '*',
                el: '*',
                data: '*',
                beforeCreate: '*',
                created: '*',
                beforeMount: '*',
                mounted: '*',
                computed: '*',
                methods: '*',
                get: '*',
                set: '*',
                watch:'*',
                PI: 3.14
            }

        },
        beforeCreate: function () {
            console.log('1')
            console.log(this.$el)
        },
        created: function () {
            console.log('2')
            console.log(this.$el)
        },
        beforeMount: function () {//这一部才开始创建el 
            console.log('3')
            console.log(this.$el)
        },
        mounted: function () {
            console.log('4')
            console.log(this.$el)
        },
        computed: {//有缓存  页面刷新时重新开始计算
            say: function () {
                return this.username.split('').reverse().join('')
            },
            fullName: {
                get: function () {
                    return this.firstName + ' ' + this.lastName
                },
                set: function (value) {//在设置的时候就会触发set
                    var temp = value.split(" ")
                    this.firstName = temp[0]
                    this.lastName = temp[1]
                }
            }

        },
        methods: {//方法 
            say: function () {
                alert('hello')
            }
        },
        watch: {//监听  可以监听必要的值
            PI: function (newVal, oldVal) {
                console.log(newVal)//新值
                console.log(oldVal)//老值
                if (newVal != oldVal) {
                    console.error('PI值不允许修改')
                    this.PI = 3.14
                }
            }
        }

    })

</script>

</html>